<template>
    <div>
        <back-head title="申请售后" returnFlag="true"></back-head>
        <p class="orderNum mgb20">
            <span class="label">订单编号: </span>
            <span>{{orderNo}}</span>
        </p>
        
        <!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
            </div>
            <el-table
                ref="table"
                border
                :data="dataList"
                tooltip-effect="dark"
                style="width: 100%;">
                <el-table-column
                    prop="productName"
                    label="商品名称"
                    min-width="150">
                </el-table-column>
                <el-table-column
                    prop="skuCode"
                    label="SKUID">
                </el-table-column>
                <el-table-column
                    label="包裹状态"
                    width="120">
                    <template slot-scope="scope">
                        {{packageStatusList[scope.row.packageStatus] || '未知'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="totalCount"
                    label="数量"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="refundedCount"
                    label="售后完成SKU数量"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="refundingCount"
                    label="售后中SKU数量"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="waitRefundedCount"
                    label="可申请售后SKU数量"
                    width="140">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    width="110"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-service" :disabled="scope.row.waitRefundedCount==0 || scope.row.refundingCount!=0" @click="applyBtn(scope.row)">申请售后</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderNo : this.$route.query.orderNo,
                dataList: [],
                packageStatusList: {
                    'START_DELIVERY' : '已发货',
                    'WAITING_DELIVERY' : '待发货',
                    'WAITING_COMMENT' : '已收货'
                },
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 0,
            }
        },
        computed: {
            
        },
        created(){
            this.getData();
        },
        methods: {         
            getData(){
                this.$axios
                    .post("/admin/refund/refundApplyOrderInfo.json",{
                        orderNo : this.orderNo
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.data.orderSkuList;
                            
                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            },
            applyBtn(data){
                sessionStorage.setItem('skuData',JSON.stringify(data));
                this.$router.push({'path':'/submitApply',query:{
                    orderNo: this.orderNo,
                    skuCode: data.skuCode
                }})
            }
        }
    }

</script>


<style scoped>
    .orderNum{
        padding-left: 20px;
        font-size: 16px;
    }
    .orderNum .label{
        font-weight: bold;
    }
</style>
